<template>
  <div>
    <div>
      <button @click="componentName = 'One'">One</button>
      <button @click="componentName = 'Two'">Two</button>
      <button @click="componentName = 'Three'">Three</button>
    </div>
    <!-- 
      书写异步组件的原因:
      - 在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块
      - Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。
      Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染

      书写异步组件的做法
      使用import函数引入组件 

      注意import函数并不同于模块化中的import
    -->
    <keep-alive :include="['One', 'Two']">
      <component :is="componentName"></component>
    </keep-alive>



  </div>
</template>

<script>
/* 
import One from '@/components/One'
import Two from '@/components/Two'
import Three from '@/components/Three'
*/


const One = () => import('@/components/One')
const Two = () => import('@/components/Two')
const Three = () => import('@/components/Three')

export default {
  name: 'App',
  components: {
    One,
    Two,
    Three
  },
  data() {
    return {
      componentName: 'One'
    }
  }
}
</script>

<style>
a-enter-active,
a-leave-active {
  transition: all 1s ease-in-out;
}
a-enter-from {
  opacity: 0;
}
a-enter-to {
  opacity: 1;
}
a-leave-from {
  opacity: 1;
}
a-leave-to {
  opacity: 0;
}
</style>
